<template>
    <div class="footer">
    <div class="top"><span class="iconfont">&#xe60f;</span>票面价是指通过景区指定窗口售卖的纸质门票上标注的价格</div>
    <div class="middle">
        <ul class="middle-content">
        <li class="middle-item"><span class="iconfont">&#xe603;</span><a href="">机票</a></li>
        <li class="middle-item"><span class="iconfont">&#xe710;</span><a href="">酒店</a></li>
        <li class="middle-item"><span class="iconfont">&#xe656;</span><a href="">公寓</a></li>
        <li class="middle-item"><span class="iconfont">&#xe629;</span><a href="">更多</a></li>
        </ul>
        
    </div>
    <div class="down">
        <ul class="down-content">
        <li class="down-item"><a href="">登录</a></li>
        <li class="down-item"><a href="">我的订单</a></li>
        <li class="down-item"><a href="">最近浏览</a></li>
        <li class="down-item"><a href="">关于我们</a></li>
        </ul>
    </div>
    <div class="bottom">
        <ul class="bottom-content">
            <li><a href="">触屏版</a></li>
            <li><a href="" class="active">电脑版</a></li>
        </ul>
        <p>Qunar 京ICP备05021087意见反馈</p>
    </div>
    </div>
</template>

<script>
    export default {
        name:"HomeFooter"
    }
</script>

<style lang="stylus" scoped>
.top
  width 100%
  padding .2rem 0 .2rem .4rem
  background-color #ffffff
  margin-top .1rem
  font-size .1rem
.middle
  padding .2rem 1rem
  overflow hidden
  .middle-item
    float left
    width 25%
.down
  padding .2rem 1rem
  overflow hidden
  border-bottom 1px solid #ccc
  .down-item
    float left
    width 25%
  .down-item a
    color #25a4bb;
.bottom-content
    padding: .2rem 2rem 
    margin-left .5rem
    text-align: center; 
    overflow hidden   
.bottom-content li
    margin-right .3rem
    float left 
    width 30% 
  .active
     color #25a4bb; 
.bottom p
     text-align  center  
     padding-bottom .2rem     
</style>